<template>
  <div>
    <h2>搜索组件</h2>
    <input type="text" placeholder="请输入要搜索的姓名" v-model="searchName" />
    <ul>
      <li v-for="(p, index) in filterPersons" :key="personKey[index]">
        id:{{ personKey[index] }}-----{{ p.name }}-------{{ p.sex }}---------{{
          p.age
        }}
      </li>
    </ul>
  </div>
</template>

<script>
import shortId from 'shortid'
export default {
  data() {
    return {
      searchName: '',
      shortId: '',
      personKey: [],
      persons: [
        { name: '张三', sex: '女', age: 19, phone: '1891212121' },
        { name: '李四', sex: '女', age: 22, phone: '1891212121' },
        { name: '王五', sex: '女', age: 29, phone: '1891212121' },
        { name: '赵六', sex: '女', age: 19, phone: '1891212121' },
        { name: '钱七', sex: '女', age: 32, phone: '1891212121' },
        { name: '王二', sex: '女', age: 19, phone: '1891212121' },
        { name: '李四', sex: '女', age: 31, phone: '1891212121' },
        { name: '张三', sex: '女', age: 19, phone: '1891212121' },
        { name: '赵六', sex: '女', age: 34, phone: '1891212121' },
        { name: '王五', sex: '女', age: 26, phone: '1891212121' },
        { name: '王五', sex: '女', age: 28, phone: '1891212121' },
        { name: '张三', sex: '女', age: 19, phone: '1891212121' }
      ]
    }
  },
  created() {
    this.personKey = this.persons.map(v => shortId.generate())
  },
  computed: {
    filterPersons() {
      const { searchName, persons } = this
      const arr = persons.filter(p => p.name.indexOf(searchName) !== -1)
      return arr
    }
  }
}
</script>

<style></style>
